import { useEffect, useState } from 'react'
import { DragView } from '@renderer/components/Utils'
// 预览已近截图的图片
const ViewShotScreen = (): React.JSX.Element => {
  const [base64image, setBase64image] = useState<string | undefined>()
  const [isSticky, setIsSticky] = useState<boolean>(false)
  const tabs = [
    {
      name: 'minimize',
      svg: '<svg t="1749283024713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8590"><path d="M917.333333 554.666667H106.666667a21.333333 21.333333 0 0 1 0-42.666667h810.666666a21.333333 21.333333 0 0 1 0 42.666667z" fill="#5C5C66" p-id="8591"></path></svg>'
    },
    {
      name: 'sticky',
      svg: '<svg t="1749278873019" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6279"><path d="M51.197143 1024c-13.021992 0-26.0184-5.091113-36.021541-15.094254-18.113104-18.164271-20.262117-46.050265-5.091113-66.337966l213.059228-288.325828-166.983379-166.983379C39.863661 470.961896 36.640143 445.48075 48.30621 425.2698c7.982046-12.612656 76.699275-112.82315 229.483822-75.010766 2.532765 0.307002 5.270197 0.537253 8.212297 0.793088 6.267953 0.537253 13.277827 1.17684 20.87612 2.404847 32.33752 5.244614 89.516599-20.722619 139.148552-63.037697 47.559691-40.49865 78.285451-87.751339 78.285451-120.344693 0-7.57271-0.179084-15.631507-0.358169-23.536802-1.279174-30.623426-3.223519-77.697031 31.979351-112.874317 41.649907-41.701074 107.552953-45.05251 153.270633-7.854129 0.921005 0.741921 1.76526 1.535009 2.583932 2.379264l-0.025583 0c24.585725 24.048472 276.608594 275.815506 279.243692 278.476188 21.694792 21.694792 33.642277 50.527374 33.693444 81.176384 0.025583 30.674593-11.896319 59.456009-33.539943 81.099634-35.023785 35.049369-82.353225 33.053857-113.565071 31.723516-7.393626-0.153501-15.478006-0.332585-23.025133-0.332585-30.828094 0-67.69389 21.592458-103.715431 60.760767-50.808793 55.260318-82.09739 126.63823-79.411124 158.617581 1.125673 10.258976 3.223519 28.37208 3.607271 30.930428 36.891379 149.612195-63.114447 217.843339-74.627013 225.109047-20.697036 12.484739-46.357267 9.389137-63.012113-7.240125l-178.393611-178.393611c-10.003141-10.003141-10.003141-26.171901 0-36.175042s26.171901-10.003141 36.175042 0l178.393611 178.393611c7.854129-5.091113 80.101878-54.646315 51.320462-171.76749-0.51167-2.35368-3.044434-23.562386-4.374775-35.970374-4.298025-51.115795 35.586622-136.027367 92.688951-198.118475 32.439854-35.254036 83.27423-77.287695 141.348731-77.287695 7.905296 0 16.399011 0.179084 24.662475 0.358169 32.41427 1.355924 58.048918 0.972172 75.77827-16.782763 11.973069-11.973069 18.548024-27.885994 18.548024-44.847842-0.025583-17.013015-6.677288-33.00269-18.701524-45.05251C952.221752 340.23031 683.851039 72.243349 675.945743 64.645055c-24.278723-19.724864-60.7096-17.882853-83.785899 5.21903-17.908437 17.908437-18.317772 43.491917-17.013015 75.087516 0.204668 8.800717 0.383752 17.243266 0.383752 25.148562 0 48.378362-35.995957 107.936705-96.270638 159.282751-49.478452 42.135993-122.979792 83.811483-180.491457 74.60143-6.293536-1.023339-12.049819-1.509425-17.192099-1.944345-3.325852-0.281418-6.421454-0.562837-9.312387-0.921005-2.456014-0.07675-4.860861-0.537253-7.188958-1.304758-117.760762-29.037251-167.597382 43.44075-172.893163 51.806549l182.742803 182.026466c8.954218 8.954218 10.028724 23.101883 2.481598 33.309692L51.17156 973.114457l238.617125-174.530506c11.435816-8.365798 27.425491-5.80745 35.740123 5.602782s5.80745 27.399908-5.602782 35.714539l-238.821793 174.12117C72.150014 1020.699731 61.68637 1024 51.197143 1024z" fill="#707070" p-id="6280"></path></svg>'
    },
    {
      name: 'close',
      svg: '<svg t="1749279105926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7465"><path d="M585.412525 512.594747L973.601616 124.418586c19.600808-19.600808 19.600808-51.898182 0-71.49899l-2.120404-2.120404c-19.600808-19.600808-51.898182-19.600808-71.49899 0L511.793131 439.518384 123.61697 50.799192c-19.600808-19.600808-51.898182-19.600808-71.49899 0l-2.120404 2.120404c-20.11798 19.600808-20.11798 51.898182 0 71.49899l388.189091 388.189091L49.997576 900.783838c-19.587879 19.600808-19.587879 51.898182 0 71.49899l2.120404 2.120404c19.600808 19.600808 51.898182 19.600808 71.49899 0L511.793131 586.214141l388.189091 388.176162c19.600808 19.600808 51.898182 19.600808 71.49899 0l2.120404-2.120404c19.600808-19.600808 19.600808-51.898182 0-71.49899L585.412525 512.594747z m0 0" p-id="7466" fill="#515151"></path></svg>'
    }
  ]

  useEffect(() => {
    window.electron.ipcRenderer.invoke('get-screenshot-data').then(
      (res: {
        cutInfo: {
          width: number
          height: number
          startX: number
          startY: number
        }
        base64: string
      }) => {
        console.log('asdasd', res.base64.length)
        setBase64image(res.base64)
      }
    )
  }, [])
  return (
    <>
      <DragView>
        <div className="view-shot-screen">
          <div className={'view-shot-screen-tabs'}>
            {tabs.map((item) => (
              <div
                className="view-shot-screen-tab"
                key={item.name}
                dangerouslySetInnerHTML={{ __html: item.svg }}
                onClick={() => {
                  if (item.name === 'sticky') {
                    setIsSticky(!isSticky)
                  }
                  window.electron.ipcRenderer.send('view-shot-screen', item.name)
                }}
                style={{
                  background: item.name === 'sticky' && isSticky ? '#ff4d4f' : ''
                }}
              ></div>
            ))}
          </div>
          <img className={'view-shot-screen-img'} src={base64image} alt="" />
        </div>
      </DragView>
    </>
  )
}

export default ViewShotScreen
